<!-- 商品的详情页区域 -->
<template>
	<view class="warp">
		<view class="shopbox">
			<view class="shopboxbanner">
				<!-- 轮播图区域 -->
				<view class="warp_center">
					<swiper indicator-dots="true" style="height: 420rpx;" autoplay :interval="2000" :duration="500">
						<swiper-item v-for="(item,index) in slider_image" :key="index">
							<image style="height: 420rpx;width: 100%;" :src="item"></image>
						</swiper-item>
					</swiper>
				</view>

			
			</view>
		<view class="shopbannertext">
					<view class="title">{{shopdata.store_name}}</view>
					<view class="text">{{shopdata.store_info}}</view>
					<view class="price"><text class="word1">指导价:</text><text
							style="font-size: 24rpx;">￥</text>{{shopdata.price}}</view>
					<view class="mun">库存：{{shopdata.stock}}{{shopdata.unit_name}}</view>
				</view>

			<!--配件详情  -->
			<view class="shoptext mt30">
				<view class="btn shopbtn">配件详情</view>
				<view class="text">
					<mphtml :content="shopdata.description"></mphtml>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import mphtml from '../../compontents/mp-html/mp-html.vue'
	import {detail} from '../../api/api.js'
	export default {
		components:{
			mphtml
		},
		data() {
			return {
				statusBarHeight: "",
				shopdata: {},
				slider_image: [],
				id:0,
			}
		},
		onLoad(opt) {
		this.id = opt.shopID	
		this.datainit()
		},
		created() {
			this.statusBarHeight = uni.getStorageSync('statusBarHeight')
			
		},
		methods: {
			datainit(){
				detail(this.id).then(res=>{
					this.slider_image = res.data.slider_image
					this.shopdata = res.data
					
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.home_top {
		background: #5490FE;
		width: 750upx;
		height: 160upx;
		padding: 20upx;
		box-sizing: border-box;
		flex-direction: row;
		align-items: center;
	}

	.warp_center {
		display: block;
		height: 420rpx;
		width: 100%;
		text-align: center;
	}

	.shopbannertext {
		// padding: 30upx;
		background-color: #FFFFFF;
		position: relative;
		height: 100%;
		padding: 30rpx;

		.title {
			width: 100%;
			height: 50upx;
			font-size: 36upx;
			font-weight: 500;
			line-height: 36upx;
			color: #333333;
			// overflow: hidden;
			// text-overflow: ellipsis;
			// white-space: nowrap;
		}

		.text {
			width: 100%;
			// height: 40upx;
			font-size: 28upx;
			font-weight: 400;
			line-height: 36upx;
			color: #666666;
			padding-bottom: 30rpx;
			margin: 0 0 20upx 0;
		}

		.price {
			display: inline-block;
			line-height: 40rpx;
			color: #FD3833;
			font-size: 50rpx;
			position: absolute;
			bottom: 0rpx;
			.word1 {
				color: #999999;
				font-size: 24rpx;
			}
		}

		.mun {
			// float: right;
			width: 154upx;
			height: 33upx;
			font-size: 24upx;
			font-weight: 400;
			line-height: 17px;
			color: #999999;
			position: absolute;
			bottom: 0rpx;
			right: 30rpx;
		}
	}


	.shoptext {
		padding: 30upx;
		background-color: #FFFFFF;

		.shopbtn {
			width: 100%;
			height: 80upx;
			background: #029E8E;
			border: 3upx solid #029E8E;
			font-size: 32upx;
			font-weight: 500;
			line-height: 80upx;
			color: #FFFFFF;
			text-align: center;
		}
	}
</style>
